<template lang="html">
  <div class="moneybag">
    <div class="moneybag-head">
      <div class="main">
        <div class="avatar">
          <img class="max" :src="getUserInfo().headimgurl">
        </div>
        <div class="info">
          <p class="user-identity">
            {{ getUserInfo().nickname }}
          </p>
          <p class="user-partner">
            {{ getUserInfo().level }}
          </p>
        </div>
        <div class="btn-withdrawal" @click="routeTo('/modules/moneybag/withdrawal')">
          提现
        </div>
      </div>
      <div class="numbers">
        <div class="already-spent">
          <p>
            <span>{{ txMoney }}</span>元
          </p>
          <p>
            已提现
          </p>
        </div>
        <div class="account">
          <p>
            <span>{{ balanceMoney }}</span>元
          </p>
          <p>
            余额
          </p>
        </div>
      </div>
    </div>
    <div class="moneybag-list">
      <div class="ml-title">
        <i>
          <img class="max" src="/static/version2.0/moneybag/wallet_icon_round@2x.png">
        </i>
        提现记录
      </div>
      <div v-if="recordList && recordList.length" class="scroll-wrap">
        <scroll
            class="scroll"
            :data="recordList"
            :pullup="true"
            @scrollToEnd="searchMore"
            ref="suggest"
          >
          <ul>
            <li v-for="(i, idx) in recordList" :key="idx">
              <p class="ml-number">
                <span class="text">● 余额提现</span>
                <span class="number">-￥{{ i.agent_tixian_fee }}</span>
              </p>
              <p>
                <span class="date">{{ i.addtime }}</span>
                <span :class="i.state == '审核成功'?'status':'status fail'">{{ i.state }}</span>
              </p>
            </li>
            <p class="not-tit" v-if="recordList.length && !isHasMore">————我是有底线的————</p>
          </ul>
        </scroll>
      </div>

      <div v-else class="no-result-wrapper">
        <i>
          <img class="max" src="/static/modules/news/information_img_comment@2x.png" alt="">
        </i>
        <span>抱歉，暂无记录</span>
      </div>

    </div>
  </div>
</template>

<script>
import { getMoneybagCount, getMoneybagBalance } from '@/api/modules/moneybag'
import Scroll from "@/base/scroll/scroll";
import Loading from "@/base/loading/loading";

export default {
  components: {
    Loading,
    Scroll
  },
  data() {
    return {
      txMoney: '0.00',
      balanceMoney: '0.00',
      recordList: [],
      page: 1,
      limit: 10, // 每页显示多少条
      isHasMore: true, // 是否价值底部loading
      nextPage: null // 是否存在下一页
    }
  },
  created() {
    this.getMoneybagCount();
    this.getMoneybagBalance();
    this.getMoneybagRecords();
  },
  methods: {
    // 获取我提现金额
    getMoneybagCount() {
      getMoneybagCount({
        uid: this.getUserInfo().id,
      }).then(res=>{
        this.txMoney = res.sum;
      })
    },
    // 获取我的余额
    getMoneybagBalance() {
      getMoneybagBalance({
        uid: this.getUserInfo().id,
      }).then(res=>{
        this.balanceMoney = res.data.balance;
      })
    },
    // 获取我的余额
    getMoneybagRecords(isLoading = false) {
      getMoneybagBalance({
        uid: this.getUserInfo().id,
        username: this.getUserInfo().username,
        type: 'tx',
        page: this.page,
        limit: 10,
      }).then(res=>{
        if(res.results){
          this.isHasMore = false;
          if (!isLoading && this.$refs.suggest) {
            this.$refs.suggest.scrollTo(0, 0);
          }
          this.recordList = !isLoading
            ? res.results
            : [...this.recordList, ...res.results];
          this.isHasMore = res.next ? true : false;
          this.nextPage = res.next;
        }

      })
    },
    // 下拉加载
    searchMore() {
      if (this.nextPage) {
        this.page++;
        this.getMoneybagRecords(true);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.scroll-wrap{
  height: 10rem;
}
.scroll {
  height: 100%;
  overflow: hidden;
}
.not-tit{
  text-align: center;
  color: #888;
  line-height: 1rem;
}
.moneybag{
  background-color: #fff;
  overflow: hidden;
  min-height: 17rem;
  .moneybag-head{
    background: url('/static/version2.0/moneybag/withdrawal_img_card_b@2x.png') no-repeat center center;
    background-size: 100% 100%;
    width: 9.467rem;
    height: 5.653rem;
    margin-left: .353rem;
    margin-top: .353rem;
    color: #fff;
    .main{
      overflow: hidden;
      padding: .5rem;
      .avatar{
        float: left;
        img{
          width: 1.6rem;
          height: 1.6rem;
          border-radius: 100%;
          border: 3px solid #fff;
        }
      }
      .info{
        width: 2.4rem;
        text-align: center;
        float: left;
        margin-left: .2rem;
        .user-identity{
          margin-bottom: .2rem;
          margin-top: .1rem;
        }
        .user-partner{
          border-radius: .3rem;
          padding: .07rem 0;
          background-color: rgba(255,255,255,.3);
        }
      }
      .btn-withdrawal{
        float: right;
        background-color: rgba(255,255,255,.3);
        width: 2.187rem;
        line-height: .91rem;
        border-radius: 5rem;
        font-weight: 500;
        margin-top: .2rem;
        text-align: center;
        margin-right: .2rem;
        font-size: .44rem;
      }
    }
    .numbers{
      overflow: hidden;
      & > div{
        width: 50%;
        float: left;
        text-align: center;
        margin-top: .5rem;
        span{
          font-size: .66rem;
          font-weight: 600;
          padding-right: .1rem;
        }
        p{
          padding-bottom: .1rem;
        }
      }
    }
  }
  .moneybag-list{

    .ml-title{
      margin-left: .387rem;
      i{
        display: inline-block;
        width: .453rem;
      }
      font-size: .42rem;
      margin-bottom: .4rem;
      font-weight: 600;
      margin-top: .6rem;
    }
    ul{
      padding-top: .1rem;
    }
    li{
      width: 9.2rem;
      margin-left: .387rem;
      background-color: #fff;
      padding: .4rem;
      margin-bottom: .4rem;
      border-radius: .2rem;
      box-shadow:2px 1px 8px 0px rgba(224,221,221,1);
      p{
        overflow: hidden;
      }
      .ml-number{
        padding-bottom: .4rem;
      }
      .text{
        float: left;
        font-size: .427rem;
        line-height: .8rem;
        display: inline-block;
      }
      .number{
        float: right;
        font-size: .64rem;
        font-weight: 600;
      }
      .date{
        float: left;
        color: #9B9B9B;
        font-size: .32rem;
        line-height: .5rem;
      }
      .status{
        float: right;
        color: #36A5F8;
      }
      .status.fail{
        color: #FF5851;
      }
    }
  }
  .no-result-wrapper{
    text-align: center;
    color: #999;
    i{
      width: 5rem;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>
